<template>
  <view>
     <zero-loading  v-if="loading"></zero-loading>
   <view class="book" v-else>
     <view class="book-info">
       <pImage style="width: 750rpx;" mode="widthFix"  trans-opacity
                              :transition-duration="1"
                              :src="data[0].cover"
                              placeholder="../../static/default.png"
                              err='../../static/err.jpg'
                              :height="100"
                              :width="100" />
       <p class="tit">文章名:{{data[0].name}}</p>
       <p>发布时间:{{data[0].date}}</p>
       <p>标签:
       <span v-for="(tag,i) in data[0].tags" :key="i">{{tag}}</span>
       </p>
     </view>
     <zero-markdown-view  themeColor="#007AFF" codeBgColor="#2d2d2d" :markdown="Text"></zero-markdown-view>
   </view>
  </view>
</template>

<script>
  import pImage from '@/components/p-image/index.vue'
  export default {
    components: {
        pImage
      },
    data() {
      return {
        loading:true,
        Text:'',
        data:{},
        id:0
      };
    },
    onLoad(options) {
      this.id = options.book_id
      this.getbookinfo(this.id)
    },
    methods:{
      getbookinfo(id){
          uni.$req.req(this,'getbook',{id:id}).then((res)=>{
            let {result}  = res
            if(result.code == 1){
              this.getbook(result.data)
            }else{
              uni.showModal({
              		title: '提示',
              		content: '获取信息文章失败',
                  showCancel:false,
              		success: function(res) {
              		uni.navigateTo({
              		  url:'/pages/index/index'
              		})
              	}
              })
              
            }
          })
      },
      getbook(data){
        let that = this
        that.data = data
        wx.request({
          // 示例 url，并非真实存在
          url: data[0].md,
          dataType:'其他',
          responseType:'text',
          success: function (res) {
            that.Text = res.data
            that.loading = false
          }
        })
      }
    },
    onPullDownRefresh() {
      this.Text = ''
      this.data = {}
      this.getbookinfo(this.id )
        // 关闭下拉刷新效果
        wx.stopPullDownRefresh()
    }
  }
</script>

<style lang="scss">
.book{
  width: 750rpx;
  .book-info{
    display: flex;
    flex-direction: column;
    font-size: 16px;
    text-indent: 2;
    p{
      margin: 5px;
      span{
        margin: 0 2px;
        text-decoration: underline;
      }
    }
    .tit{
      text-shadow: 0 0 20px #fefcc9,
                   10px -10px 30px #feec85,
                   -20px -20px 40px #ffae34,
                   20px -30px 35px #ec760c,
                   -20px -40px 40px #cd4606,
                   0 -50px 65px #973716,
                   10px -70px 70px #451b0e;
      font-style:oblique;
      font-weight: bold;
    }
  }
}
</style>
